<template>
  <div class="app-container">
    <el-card class="box-card">
      <h3>{{ $t("编辑礼物卡") }}</h3>
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        label-width="150px"
      >
        <el-form-item :label="$t('礼物卡编码')" prop="cardNo">
          <el-input
            v-model="dataForm.cardNo"
            :disabled="showType == 2 ? true : false"
          />
        </el-form-item>
        <!-- <el-form-item :label='$t("礼物卡分类")' prop="classificationName">
          <el-input v-model="dataForm.classificationName" :disabled='showType==2?true:false'/>
        </el-form-item> -->
        <el-form-item :label="$t('礼物卡分类')" prop="classificationId">
          <el-select
            v-model="dataForm.classificationId"
            :disabled="showType == 2 ? true : false"
            clearable
            placeholder="请选择礼物卡分类"
          >
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="item.classificationName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('礼物卡名称')" prop="name">
          <el-input
            v-model="dataForm.name"
            :disabled="showType == 2 ? true : false"
          />
        </el-form-item>
        <el-form-item :label="$t('图片')" prop="picUrl" v-if="showType == 1">
          <el-upload
            :limit="5"
            :headers="headers"
            :show-file-list="false"
            :action="uploadPath"
            :on-success="uploadPicUrl"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png,.gif"
          >
            <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <label
              v-if="dataForm.picUrl"
              class="el-upload-list__item-status-label avatar-uploader__status_label"
              @click.stop="handleRemove()"
              ><i class="el-icon-delete"></i
            ></label>
          </el-upload>
        </el-form-item>
        <el-form-item :label="$t('图片')" prop="picUrl" v-if="showType == 2">
          <img v-if="dataForm.picUrl" :src="dataForm.picUrl" class="avatar" />
        </el-form-item>
        <el-form-item :label="$t('类型')" prop="type">
          {{ dataForm.type == 2 ? "实体卡" : "虚拟卡" }}
        </el-form-item>
        <el-form-item :label="$t('数量')" prop="type" v-if="showType == 1">
          <el-radio-group v-model="showindex">
            <el-radio :label="0" style="height: 41px; line-height: 35px">{{
              $t("无限量")
            }}</el-radio>
            <div>
              <el-radio :label="1">
                <el-input
                  style="width: 100px; padding: 0px; color: #000"
                  @focus="InputFocus"
                  v-model="input"
                  clearable
                ></el-input
                >张
              </el-radio>
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('数量')" prop="type" v-if="showType == 2">
          {{ input == 0 ? $t("无限量") : input + $t("张") }}
        </el-form-item>
        <el-form-item :label="$t('描述')" prop="desc">
          <el-input
            v-model="dataForm.desc"
            type="textarea"
            :disabled="showType == 2 ? true : false"
            autosize
          />
        </el-form-item>
      </el-form>
    </el-card>
    <div class="op-container">
      <el-button @click="handleCancel">{{ $t("Cancel") }}</el-button>
      <el-button
        v-permission="['POST /admin/giftcard/create']"
        v-if="showType != 2"
        type="primary"
        @click="handleCreate"
        >{{ $t("确定") }}</el-button
      >
    </div>
  </div>
</template>

<script>
import { uploadPath } from "@/api/storage";
import { getToken } from "@/utils/auth";
import { updateGiftCard, detailGiftCard } from "@/api/gift";
import { cardClassificationList } from "@/api/cardClassification";

export default {
  name: "giftCardEdit",
  computed: {
    headers() {
      return {
        "X-Litemall-Admin-Token": getToken(),
      };
    },
  },
  data() {
    return {
      list: [],
      input: "",
      showindex: 0,
      type: this.$route.query.type,
      showType: this.$route.query.showType,
      dataForm: {
        numbers: 0,
        type: this.$route.query.type,
        picUrl: "",
        classificationId: undefined,
      },
      uploadPath,
      rules: {
        name: [
          {
            required: true,
            message: this.$t("礼物卡名称必填"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getData();
    this.getCardClassification();
  },
  methods: {
    getData() {
      let id = this.$route.query.id;
      if (id) {
        detailGiftCard(id).then((response) => {
          this.dataForm = response.data.data;
          this.dataForm.numbers > 0
            ? (this.showindex = 1)
            : (this.showindex = 0);
          this.dataForm.numbers > 0
            ? (this.input = this.dataForm.numbers)
            : (this.input = "");
        });
      }
    },
    InputFocus() {
      this.showindex = 1;
    },
    uploadPicUrl: function (response) {
      this.dataForm.picUrl = response.data.url;
    },
    handleCancel() {
      if (this.type == 2) {
        this.$router.push({ path: "/promotion/giftcard" });
      } else {
        this.$router.push({ path: "/promotion/VirtualCardManagement" });
      }
      // this.$router.push({path:'/promotion/giftcard'})
    },
    handleCreate() {
      this.showindex == 0 ? 0 : this.input;
      if (this.showindex == 0) {
        this.dataForm.numbers = 0;
      } else {
        if (this.input == "") {
          this.$notify.error({
            title: this.$t("Failed"),
            message: this.$t("请填写数量"),
          });
          return;
        } else {
          this.dataForm.numbers = this.input;
        }
      }
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          updateGiftCard(this.dataForm)
            .then(() => {
              this.$notify.success({
                title: this.$t("Success!"),
                message: this.$t("Success!"),
              });
              if (this.type == 2) {
                this.$router.push({ path: "/promotion/giftcard" });
              } else {
                this.$router.push({ path: "/promotion/VirtualCardManagement" });
              }
            })
            .catch((response) => {
              this.$notify.error({
                title: this.$t("Failed"),
                message: this.$t(response.data.errmsg),
              });
            });
        }
      });
    },
    handleRemove: function () {
      this.dataForm.picUrl = undefined;
    },
    getCardClassification() {
      var formInline = {
        classificationName: undefined,
        classificationStatus: undefined,
        page: 1,
        limit: 1000,
        sort: "add_time",
        order: "desc",
      };
      cardClassificationList(formInline)
        .then((response) => {
          this.list = response.data.data.list;
        })
        .catch(() => {
          this.list = [];
        });
    },
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
.avatar-uploader__status_label {
  display: block;
  color: red;
}
</style>
